<template>
  <div>
    <van-tabs sticky>
      <van-tab title="想法">
        <!-- 瀑布流 -->
        <div class="pull-list">
          <div class="pull-list-item" v-for="(v) in list" :key="v.id">
            <img class="top-img" :src="v.image" alt="">
            <p class="title">{{ v.title }}</p>
            <dl>
              <dt>
                <img :src="v.avatar" alt="" width="20" height="20" style="border-radius: 50%;">
                <span>{{ v.nickname }}</span>
              </dt>
              <dd>
                <van-icon name="like-o" />
                <span>{{ v.zan }}</span>
              </dd>
            </dl>
          </div>
        </div>
      </van-tab>
      <van-tab title="推荐">
        <div class="recommend">
          <ListItem @click="say(v)" :v="v" :type="v.type" v-for="(v) in love" :key="v.id"></ListItem>
        </div>
      </van-tab>
      <van-tab title="热榜">3</van-tab>
    </van-tabs>
    <!-- 广告 -->
    <Ad />
  </div>
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pull-list {
  column-count: 2;
  column-gap: 0;
  break-inside: avoid-column;

  .pull-list-item {
    break-inside: avoid-column;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 6px;
    margin: 0 4px 10px 4px;

    .title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 2;
      /* 显示的行数 */
      text-overflow: ellipsis;
    }

    .top-img {
      width: 100%;
    }

    dl {
      display: flex;
      justify-content: space-between;
      align-items: center;

      dl,
      dt {
        display: flex;
        align-items: center;
      }
    }
  }
}

.recommend {
  background-color: #000;
}
</style>

<script setup>
import Ad from '@/components/ad/indexView.vue';
import ListItem from '@/components/listItem/indexView.vue';
import { ref } from 'vue';
import axios from 'axios'
/************ 推荐 列表***********/
const love = ref([]);
const getLove = async () => {
  const resp = await axios.get('/love');
  console.log(resp.data)
  love.value = resp.data
}
getLove()

/************ 想法 列表***********/
const list = ref([]);
const getList = async () => {
  const resp = await axios.get('/list')
  list.value = resp.data
}
getList()

const say = (v) => {
  alert(JSON.stringify(v))
}

</script>